<template>
    <div>
        <div class="retTop">
            <x-header :left-options="{backText: ''}" class="ret">
                <div class="retTitle">消费明细</div> 
            </x-header>
            <div  style="padding: 0px 20px 0px;background-color:#fff;">
                <x-hr></x-hr>
                <div style="font-size:12px">
                    账户余额(元)：
                </div>
                <div>
                    <countup :start-val="1" :end-val="money" :duration="0.5" style="padding:10px 20px 0px;font-size:28px"></countup>
                </div>
            </div> 
            <tab :line-width=4  v-model="tabindex">
                <tab-item class="vux-center" :selected="tabname === item" v-for="(item, tabindex) in tablist" 
                @click="tabname = item" :key="tabindex" @on-item-click="getOrder">{{item}}</tab-item>
            </tab> 
        </div>
        <div style="padding-top:184px;">
            <!-- 无记录 -->
            <div v-show="isShowNull" style="width:100%;display:block;text-align:center;padding-top:10px; color: #ccc;">
                暂无记录
            </div>
 
            <!-- 充值记录 -->
            <div v-show="isShowCzjl">  
                <x-table :cell-bordered="false"  style="background-color:#fff;">
                    <thead>
                    
                    </thead>
                    <tbody> 
                    <tr v-for="(item,i) in czitems" :key="i" style="line-height: 35px;"> 
                        <td class="fontFamily" >
                            <div style="text-align: left;padding-left:10px;">{{item.yhhdName}}</div>
                            <div style="text-align: left;padding-left:10px;color: #525252;font-size:13px;">{{item.chongzsj |formatDate}}</div>
                        </td>
                        <td class="fontFamily">
                            <div style="text-align: right;padding-right:10px;">充{{item.jineCz}}送
                                {{
                                    item.jineYh == null || item.jineYh == '' ? 0 : item.jineYh
                                }}
                            </div>
                            <div style="text-align: right;padding-right:10px;color: #525252;font-size:13px;">
                                {{
                                cztype = item.biaoz == 1 ? '正在充值' : (item.biaoz ==  2 ? '充值成功' : (item.biaoz ==  3 ? '充值失败' : ''))
                                }}
                            </div>
                        </td> 
                    </tr> 
                    </tbody>
                </x-table>  
            </div>  
            <!-- 消费记录 -->
            <div v-show="isShowXfjl">
                <x-table :cell-bordered="false"  style="background-color:#fff;">
                    <thead>
                    
                    </thead>
                    <tbody>
                    <tr v-for="(item,i) in xfitems" :key="i" style="line-height: 35px;"> 
                        <td class="fontFamily" >
                            <div style="text-align: left;padding-left:10px;">会员卡消费</div>
                            <div style="text-align: left;padding-left:10px;color: #525252;font-size:13px;">{{item.xiaofsj |formatDate}}</div>
                        </td>
                        <td class="fontFamily">
                            <div style="text-align: right;padding-right:10px;">-{{item.jineHyk}}</div>
                            <div style="text-align: right;padding-right:10px;color: #525252;font-size:13px;">{{jytype}}</div>
                        </td> 
                    </tr> 
                    </tbody>
                </x-table> 
            </div>
        </div>       
    </div>
</template>

<script>
import { sign, signStr } from "@/assets/js/sign.js";
import { formatDate } from "@/assets/js/utils.js";

 import { XHeader,XHr,Tab,TabItem,XTable,Sticky,Countup, TransferDomDirective as TransferDom } from 'vux'
    export default {
        directives: {
            TransferDom
        },
        components: { XHeader,XHr,Tab,TabItem,XTable,Sticky,Countup } ,
        created() {
            this.create();
        },
        filters: {
            formatDate(time) {
            var date = new Date(time);
            return formatDate(date, "MM-dd");
            }
        },
        data () {
            return { 
                memberInfoSj: null,
                tabindex: 0, 
                tablist: ['充值', '消费'],
                tabname: '充值',
                money: 0,   //余额
                jytype: '交易成功', //交易状态
                cztype: '充值成功', //充值状态
                isShowNull: true, //无记录时显示
                isShowCzjl: false, //是否显示充值记录
                isShowXfjl: false,  //是否显示消费记录
                czitems: null,
                xfitems: null,
                item: null,
 
            }
        },
        methods: { 
            create(){
                this.memberInfoSj = this.$store.state.memberInfoSj;
                // console.log("memberInfoSj : "+JSON.stringify(this.memberInfoSj))
                if(this.memberInfoSj == null) return;
                this.money = this.memberInfoSj.zhangsje;
                this.selectOrders();
            },
            getOrder(){
                if(this.memberInfoSj == null) return;
                this.selectOrders();
            },
            selectOrders(){
                var _typeUrl = '';
                if(this.tabindex == 0){ 
                    _typeUrl = "member/getRecharges";
                }else if(this.tabindex == 1){ 
                    _typeUrl = "member/getExpense";
                }else{
                    this.isShowNull = true;
                    return;
                }
                // console.log(this.tabindex + ': ' + _typeUrl)
                let urlparam = sign("/v1/api/"+_typeUrl);  
                urlparam.append("hycxid", this.memberInfoSj.id);

                this.$http.post(_typeUrl, urlparam).then(ret => {  
                    // console.log(ret)
                    if (ret.status == 200) {
                        var _data = ret.data.resultObject;
                        var _code = ret.data.code || ret.data.result.code;
                        var _msg = ret.data.msg || ret.data.result.msg;
 
                        if (_code == 1) { 
                            if(this.tabindex == 0){ 
                                // console.log("cz: "+JSON.stringify(_data))
                                
                                this.czitems = _data;
                                this.xfitems = null;
                                this.isShowCzjl = true;
                                this.isShowXfjl = false; 
                            }else if(this.tabindex == 1){ 
                                this.czitems = null;
                                this.xfitems = _data;
                                this.isShowCzjl = false;
                                this.isShowXfjl = true;
                            }
                            // console.log("cz: "+this.isShowCzjl + "  xf: "+this.isShowXfjl)
                             
                            this.isShowNull = false;  
                        }else{
                            this.isShowCzjl = false;
                            this.isShowXfjl = false;
                            this.isShowNull = true; 
                        }
                    }
                });
            }  
        }  
    }
</script>

<style scoped lang="less"> 

.retTop {
    background-color:#fff;  
    background: #fff;
    width: 100%;
    // height: 2.5rem;
    // line-height: 2.5rem;
    // text-align: center;
    font-size: 0.9rem;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 97;
 }
.ret {
    background-color:#fff;  
    background: #fff;
 }
 .retTitle{
     color: #000;
     font-size: 14px;
 } 
 .fontFamily{
     font-family: 'Arial','Microsoft YaHei','黑体','宋体',sans-serif;
 }
</style>